<template>
  <div class="dm_userCenter__content--common">
    <el-row>
      <el-col :span="14">
        <el-form
          :model="personInfo"
          status-icon
          :rules="rules"
          ref="personInfo"
          label-width="80px"
          size="small"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="personInfo.username"
                  placeholder="请输入用户名"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="昵称" prop="nickname">
                <el-input
                  v-model="personInfo.nickname"
                  placeholder="请输入昵称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="手机号码" prop="phone">
                <el-input
                  v-model="personInfo.phone"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="personInfo.gender">
                  <el-radio :label="0">未知</el-radio>
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="生日" prop="birthday">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="personInfo.birthday"
                  style="width: 100%;"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="选择头像" prop="icon">
                <el-radio-group v-model="radio">
                  <el-radio :label="0"
                    ><el-avatar :size="50" :src="imgs[0]"></el-avatar
                  ></el-radio>
                  <el-radio :label="1"
                    ><el-avatar :size="50" :src="imgs[1]"></el-avatar
                  ></el-radio>
                  <el-radio :label="2"
                    ><el-avatar :size="50" :src="imgs[2]"></el-avatar
                  ></el-radio>
                  <el-radio :label="3"
                    ><el-avatar :size="50" :src="imgs[3]"></el-avatar
                  ></el-radio>
                  <el-radio :label="4"
                    ><el-avatar :size="50" :src="imgs[4]"></el-avatar
                  ></el-radio>
                </el-radio-group>
                <!-- <Upload
                  :icon="personInfo.icon"
                  :getImageUrl="getImageUrl"
                  :username="username"
                /> -->
              </el-form-item>
            </el-col>
          </el-row>
          <div class="dm_userCenter__content--common__btn">
            <el-button style="width: 20%" size="small" @click="resetForm"
              >重 置</el-button
            >
            <el-button
              type="primary"
              style="width: 20%"
              size="small"
              @click="submitForm('personInfo')"
              >保 存</el-button
            >
          </div>
        </el-form>
      </el-col>
      <el-col :span="10">
        <el-form disabled label-width="82px" size="small">
          <el-row>
            <el-col :span="24">
              <el-form-item label="用户名：" prop="username">
                <el-input :value="personInfo.username || '-'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="昵称：" prop="nickname">
                <el-input :value="personInfo.nickname || '-'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="手机号码：" prop="phone">
                <el-input :value="personInfo.phone || '-'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="性别：" prop="gender">
                <el-input :value="personInfo.gender | genderFilters"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="生日：" prop="birthday">
                <el-input :value="personInfo.birthday || '-'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="头像：" prop="icon">
                <el-avatar :size="50" :src="personInfo.icon">{{
                  !personInfo.icon ? username : ""
                }}</el-avatar>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getInfo, updateInfo } from "@/api/login";
import Upload from "@/components/userCenter/upload.vue";
export default {
  data() {
    const validatortelephone = function(rule, value, callback) {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      personInfo: {
        username: null,
        nickname: null,
        phone: null,
        gender: null,
        birthday: null,
        icon: null
      },
      rules: {
        username: [],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: validatortelephone,
            trigger: ["blur", "change"]
          }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        birthday: [
          {
            type: "string",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
        //icon: [{ required: true, message: "请选择头像", trigger: "change" }]
      },
      //imageUrl: null,
      //delList: [],
      imgs: [
        "https://dragon-oss2.oss-cn-shenzhen.aliyuncs.com/freshmall/icons/mihoutao.png",
        "https://dragon-oss2.oss-cn-shenzhen.aliyuncs.com/freshmall/icons/nangua.png",
        "https://dragon-oss2.oss-cn-shenzhen.aliyuncs.com/freshmall/icons/ningmeng.png",
        "https://dragon-oss2.oss-cn-shenzhen.aliyuncs.com/freshmall/icons/xigua.png",
        "https://dragon-oss2.oss-cn-shenzhen.aliyuncs.com/freshmall/icons/yezi.png"
      ],
      radio: 0
    };
  },
  computed: {
    username() {
      return this.$store.state.user.username;
    },
    token() {
      return this.$store.state.user.token;
    }
  },
  mounted() {
    this.getUserInfoData();
  },
  methods: {
    // 获取上传的图片
    // getImageUrl(url, file = {}) {
    //   let icon = this.personInfo["icon"];
    //   if (icon != url && !this.delList.length) {
    //     this.delList =
    //       icon && icon.includes("api/")
    //         ? [icon.slice(icon.indexOf("api/") + 4)]
    //         : [];
    //   }
    //   this.personInfo["icon"] = url;
    //   this.imageUrl = file;
    // },

    // 重置
    resetForm() {
      this.getUserInfoData();
    },
    // 个人资料 - 表单校验
    submitForm(refName) {
      this.$refs[refName].validate(valid => {
        if (valid) {
          //let formData = new FormData();
          this.personInfo.icon = this.imgs[this.radio];
          let personInfo = this.personInfo;
          //let delList = this.delList;
          //let imageUrl = this.imageUrl;

          //delete personInfo.icon;
          // 表单
          //formData.append("userInfo", JSON.stringify(this.personInfo));
          // // 存储被删图片
          //formData.append("delList", JSON.stringify(delList));
          //formData.append("username", this.username);

          // if (typeof imageUrl == "object") {
          //   formData.append("icon", imageUrl);
          // } else {
          //   let url = imageUrl
          //     ? imageUrl.slice(imageUrl.indexOf("api/") + 4)
          //     : "";
          //   formData.append("icon", url);
          // }
          this.postUpdateUserInfoData(personInfo);
        } else {
          return false;
        }
      });
    },
    // 查询 - 个人资料
    async getUserInfoData() {
      const res = await getInfo();
      try {
        if (res.code === 200) {
          const { data = {} } = res || {};
          data["icon"] = data["icon"] ? data["icon"] : null;
          this.personInfo = data;
          //将手机号传给父组件
          this.$emit('phone', data.phone);
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 修改 - 个人资料
    async postUpdateUserInfoData(datas = {}) {
      const res = await updateInfo(datas);
      if (res.code === 200) {
        this.$message({
          message: "修改信息成功",
          type: "success"
        });
      } else {
        this.$message.error(res.message);
      }
    }
  },
  filters: {
    genderFilters(val) {
      let obj = {
        "0"() {
          return "未知";
        },
        "1"() {
          return "男";
        },
        "2"() {
          return "女";
        }
      };
      return (val && obj[val]()) || "-";
    }
  }
};
</script>

<style lang="scss"></style>
